<template>
  <div>
      <template v-for="(item,index) in props.menuList">
        <el-sub-menu :index="item.id" v-if="item.children" :key="item.index">
          <template #title>
            <i :class="item.icon" style="margin-right:8px;"></i>
            {{ item.menu_name }}
          </template>
          <MenuTree :menuList="item.children"></MenuTree>
        </el-sub-menu>
        <el-menu-item v-if="!item.children" :index="item.menu_url" :key="item.index" @click="clickMenu(item)">
          <!-- <el-icon v-if="item.icon" style="vertical-align: middle">
            <PriceTag />
          </el-icon> -->
          <i :class="item.icon" style="margin-right:8px;"></i>
          {{ item.menu_name }}
        </el-menu-item>
      </template>
  </div>
</template>

<script setup>
import { onMounted } from 'vue';
import { useStore } from 'vuex' // 引入useStore 方法
import { useRouter, useRoute } from 'vue-router'

const store = useStore()  // 该方法用于返回store 实例
const router = useRouter()
const props = defineProps({
  menuList: {
    type: Array,
    default: []
  }
})
const clickMenu = (item) =>{
  console.log('e=', item)
  //调用vuex的selectMenu方法存储数据
  store.commit('selectMenu', item)
  //跳转路由
  router.push({ path: item.menu_url })
}
console.log(props)
</script>
<style lang='less' scoped>
</style>